<template>
    <dialog ref="dialogRef" class="dialog">
        <div class="flex-box" style="height: 100%;box-sizing: border-box;">
            <div class="flex-header">
                <slot name="header" :close="close"></slot>
                <button class="sea-btn-icon pull-right" @click="close"><i class="fa fa-fw fa-close"></i></button>
            </div>
            <div class="flex-body">
                <slot name="body" :close="close">
                </slot>
            </div>
            <div class="flex-footer">
                <slot name="footer" :close="close">
                    <div class="pull-right">
                        <el-button class="sea-btn" type="primary">提交</el-button>
                        <el-button class="sea-btn" @click="close">取消</el-button>
                    </div>
                </slot>
            </div>
        </div>
    </dialog>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";

/**
 * 标准模态弹窗
 *
 * 弹窗大小根据内容自适应，如果需要改变大小，直接在样式上设置即可
 */
interface Props {
    /** model-value */
    modelValue: boolean
}

const props =  withDefaults(defineProps<Props>(), {
    modelValue: true
})

// Emits
const emit = defineEmits(['update:modelValue', 'change']);

const dialogRef = ref()

const open = () => {
    emit('update:modelValue', true);
    emit('change', true);
}

const close = () => {
    emit('update:modelValue', false);
    emit('change', false);
}

watch(() => props.modelValue, (val) => {
    val ? dialogRef.value.show() : dialogRef.value.close();
});

onMounted(() => {
    if (props.modelValue === true) {
        dialogRef.value.showModal();
    }
})

</script>
